import React from 'react';
import { Button, Col, Form, Row } from 'antd';
import PropTypes from 'prop-types';
import styles from '@/pages/OnboardAndLeave/AdjustPost/Add/index.less';
import { Originator, BeforeSuperior, Ceo, Hr, GroupCeo } from './Steps';
import { useForms } from './utils';

const { Item } = Form;
const formItemLayout = {
    labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
    },
    wrapperCol: {
        xs: { span: 24 },
        sm: { span: 8 }
    }
};
const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0
        },
        sm: {
            span: 8,
            offset: 4
        }
    }
};

// 对应数据库中的process_task_template表，如果离职流程更改（增加公司，流程节点修改），这里也必须修改
const ORIGIN_KEY = [
    'GP-HRLO-XM-20200309-002-T-001',
    'GP-HRLO-XM-20200309-001-T-001',
    'GP-HRLO-VG-20200309-002-T-001',
    'GP-HRLO-VG-20200309-001-T-001',
    'GP-HRLO-SG-20200309-002-T-001',
    'GP-HRLO-SG-20200309-001-T-001'
];

const SUPERIOR_KEY = [
    'GP-HRLO-XM-20200309-001-T-002',
    'GP-HRLO-XM-20200309-002-T-002',
    'GP-HRLO-SG-20200309-001-T-002',
    'GP-HRLO-SG-20200309-002-T-002',
    'GP-HRLO-VG-20200309-001-T-002',
    'GP-HRLO-VG-20200309-002-T-002'
];

const CEO_KEY = [
    'GP-HRLO-XM-20200309-001-T-003',
    'GP-HRLO-XM-20200309-002-T-003',
    'GP-HRLO-SG-20200309-001-T-003',
    'GP-HRLO-SG-20200309-002-T-003',
    'GP-HRLO-VG-20200309-001-T-003',
    'GP-HRLO-VG-20200309-002-T-003'
];

const HR_KEY = ['GP-HRLO-XM-20200309-001-T-004', 'GP-HRLO-SG-20200309-001-T-004', 'GP-HRLO-VG-20200309-001-T-004'];

const GROUP_CEO_KEY = ['GP-HRLO-XM-20200309-001-T-005', 'GP-HRLO-XM-20200309-002-T-004'];

const Forms = ({ detail, isEdit, current, form, query, currentUser }) => {
    const { leaveOfficeId, otherPost, processTemplateId, processInstanceId } = query;
    const { currentProcessTaskInstance, processTaskTemplates } = detail;
    const {
        relatedBusinessObject = {},
        assigneeEmployeeIds = '',
        taskPath = '',
        taskTemplateId
    } = currentProcessTaskInstance;

    const formMap = [
        {
            key: ORIGIN_KEY,
            content: (
                <Originator
                    form={form}
                    relatedBusinessObject={relatedBusinessObject}
                    currentUser={currentUser}
                    otherPost={otherPost}
                    leaveOfficeId={leaveOfficeId}
                    key={1}
                    current={current}
                    isEdit={isEdit && !taskTemplateId}
                />
            )
        },
        {
            key: SUPERIOR_KEY,
            content: (
                <BeforeSuperior
                    form={form}
                    relatedBusinessObject={relatedBusinessObject}
                    currentUser={currentUser}
                    otherPost={relatedBusinessObject.startBy === '1'}
                    leaveOfficeId={leaveOfficeId}
                    key={2}
                    isEdit={isEdit && SUPERIOR_KEY.includes(taskTemplateId)}
                />
            )
        },
        {
            key: CEO_KEY,
            content: (
                <Ceo
                    key={3}
                    form={form}
                    relatedBusinessObject={relatedBusinessObject}
                    currentUser={currentUser}
                    otherPost={otherPost}
                    leaveOfficeId={leaveOfficeId}
                    isEdit={isEdit && CEO_KEY.includes(taskTemplateId)}
                />
            )
        },
        {
            key: HR_KEY,
            content: (
                <Hr
                    key={4}
                    tailFormItemLayout={tailFormItemLayout}
                    form={form}
                    relatedBusinessObject={relatedBusinessObject}
                    currentUser={currentUser}
                    otherPost={otherPost}
                    leaveOfficeId={leaveOfficeId}
                    isEdit={isEdit && HR_KEY.includes(taskTemplateId)}
                />
            )
        },
        {
            key: GROUP_CEO_KEY,
            content: (
                <GroupCeo
                    key={5}
                    form={form}
                    relatedBusinessObject={relatedBusinessObject}
                    currentUser={currentUser}
                    otherPost={otherPost}
                    leaveOfficeId={leaveOfficeId}
                    isEdit={isEdit && GROUP_CEO_KEY.includes(taskTemplateId)}
                />
            )
        }
    ];

    const steps = processTaskTemplates
        .map(item => {
            const match = formMap.find(formItem => formItem.key.includes(item.taskTemplateId)) || {};
            return match.content || null;
        })
        .slice(0, current + 1);

    const { cancelLoading, rejectLoading, submitLoading, handleCancel, handleReject, handleSubmit } = useForms({
        form,
        leaveOfficeId,
        detail,
        processTemplateId,
        processInstanceId,
        otherPost,
        currentUser
    });
    const btn = () => (
        <Col>
            <Button loading={rejectLoading} onClick={handleReject}>
                退回
            </Button>
        </Col>
    );
    return (
        <Form className={!isEdit ? styles.detail : ''} {...formItemLayout}>
            {steps}
            {isEdit && (
                <Item style={{ marginBottom: 4 }} {...tailFormItemLayout}>
                    <Row justify="start" type="flex" gutter={12}>
                        <Col>
                            <Button loading={submitLoading} type="primary" onClick={handleSubmit}>
                                提交
                            </Button>
                        </Col>
                        {/* 新增时、被退回时、且是发起人 */}
                        {leaveOfficeId && isEdit && current === 0 && (
                            <Col>
                                <Button loading={cancelLoading} onClick={handleCancel}>
                                    撤销
                                </Button>
                            </Col>
                        )}
                        {/* 当前操作人且处于编辑，且不能是第一步 */}
                        {leaveOfficeId &&
                            assigneeEmployeeIds.split(',').includes(`${currentUser.id}`) &&
                            taskPath.length !== 3 &&
                            btn()}
                    </Row>
                </Item>
            )}
            {current !== 0 && isEdit && leaveOfficeId && current < detail.processTaskTemplates.length - 1 && (
                <Item extra="提交后，表明您已同意该员工的离职申请" {...tailFormItemLayout} />
            )}
            {current !== 0 && isEdit && leaveOfficeId && current === detail.processTaskTemplates.length - 1 && (
                <Item
                    extra="提交后，该员工将确认离职，待离职最后一天下班时间为止，该员工将无法登录GMS系统，所有权限将被收回，员工状态变为已离职"
                    {...tailFormItemLayout}
                />
            )}
        </Form>
    );
};

Forms.propTypes = {
    detail: PropTypes.object.isRequired,
    // 当前查看者是否有编辑权限
    isEdit: PropTypes.bool.isRequired,
    // 当前查看者处于第几步骤
    current: PropTypes.number.isRequired
};

export default Form.create()(Forms);
